<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
	<f:layout name="Default" />

	This Template is responsible for creating a table of domain objects.

	If you modify this template, do not forget to change the overwrite settings
	in /Configuration/ExtensionBuilder/settings.yaml:
	  Resources:
		Private:
		  Templates:
			List.html: keep

	Otherwise your changes will be overwritten the next time you save the extension in the extension builder

	<f:section name="content">
		<div class="section-xlg">
		  <!-- <h2 class="lg-title">观察团成员</h2> -->
		  
			<link rel="stylesheet" type="text/css" href="{f:uri.resource(path:'Css/swiper.min.css')}" />
			<link rel="stylesheet" type="text/css" href="{f:uri.resource(path:'Css/index.css')}" />
		
			<div class="space-md"></div>
			  <div id="teamSlider" class="owl-carousel" style="display:block; opacity:1;">
			      <div class="swiper-container">
			          <div class="swiper-wrapper">
			              
			            <f:for each="{teams}" as="vo" iteration="itemIteration">
			              <div class="swiper-slide">
			                  <div class="item">
			                      <div class="profile-circle fadeIn wow" data-wow-delay="0.7s">
			                          <div class="hover-content ">
			                              <div class="profile lg-size">
			                                <f:image src="uploads/tx_teamlist/{vo.image}" />
			                              </div>
			                          </div>
			                          <h3>{vo.name}</h3>
			                          <hr>
			                          <p class="text-block">
			                          	{vo.intro -> f:format.stripTags()->f:format.crop(maxCharacters: '20', respectWordBoundaries:'0')}
			                          </p>
			                          <button  class="btn trigger" data-id="dialog_{itemIteration.cycle}">更多</button>
			                      </div>
			                  </div>
			              </div>
			            </f:for> 
			          </div>
			          <!-- <div class="pagertool"></div> -->
			      </div>
			  </div>
		</div>
		
		<f:for each="{teams}" as="vo" iteration="itemIteration">
			<div id="dialog_{itemIteration.cycle}" class="dialog">
			    <div class="dialog__overlay"></div>
			    <div class="dialog__content">
			        <div class="dialog-inner">
			            <h3>{vo.name}
			                <small></small>
			            </h3>
			            <div class="dialog-body">
			                <p class="text-block first">{vo.intro}</p>
			                <div class="text-block second">
			                <f:format.raw> <p>{vo.detail}</p> </f:format.raw> 
			                </div>
			            </div>
			            <div>
			                <button class="btn action closebox" data-dialog-close="">关闭</button>
			            </div>
			        </div>
			    </div>
			</div>
			</f:for> 
			
			<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/swiper.jquery.min.js')}"></script>
			<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/classie.js')}"></script>
			<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/jialogFx.js')}"></script>
			<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/plugins.js')}"></script>
			<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/do.js')}"></script>
			<script type="text/javascript" src="{f:uri.resource(path:'JavaScript/com.js')}"></script>
			<script type="text/javascript">
			  $(".trigger").click(function(event) {
			    var a = $(this).attr('data-id');
			    $("#"+a).addClass('dialog--open');
			    $(".closebox").click(function(event) {
			      $("#"+a).removeClass('dialog--open')
			    });
			  });
			</script>

	</f:section>
</html>